<template>
	<view class="ss-content ss-cmp-input-content">
		<c-cell-group title="按钮用法">
			<c-cell :cellStyle="cellStyle">
				<view class="c-row">
					<view class="c-col-4" v-for="(item, index) in buttonTypes" :key="index">
						<c-colors :theme="item.theme" :pro="item.pro">
							<c-button :type="item.type" :plain="item.plain" :radius="item.radius">{{item.label}}</c-button>
						</c-colors>
					</view>
				</view>
			</c-cell>
		</c-cell-group>
		<c-cell-group title="字体用法">
			<c-cell>
				<c-colors :theme="['t']">
					<text>我是主题色</text>
				</c-colors>
			</c-cell>
			<c-cell>
				<c-colors :theme="['s1']">
					<text>我是辅色1</text>
				</c-colors>
			</c-cell>
			<c-cell>
				<c-colors :theme="['s2']">
					<text>我是辅色2</text>
				</c-colors>
			</c-cell>
		</c-cell-group>
		<c-cell-group>
			<template #title>
				<view class="flex-space-between">
					<view>背景颜色</view>
					<view class="flex-ajcenter">
						<c-switch v-model="radiusFlag" selColor="#FA3F1E">开启圆角</c-switch>
					</view>
				</view>
			</template>
			<c-cell :cellStyle="cellStyle">
				<c-colors :theme="['t', '#fff']" :pro="['bgc', 'c']" :radius="radiusFlag ? 40 : 0">
					<view class="p24">我是有背景的人</view>
				</c-colors>
			</c-cell>
			<c-cell :cellStyle="cellStyle">
				<c-colors :theme="['90deg|t|s1', '#fff']" :pro="['bglg', 'c']" :radius="radiusFlag ? 40 : 0">
					<view class="p24">我能够渐变呢</view>
				</c-colors>
			</c-cell>
		</c-cell-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radiusFlag: false,//开启圆角
				cellStyle: {padding: 0},
				buttonTypes: [{
					type: "inherit",
					label: "按钮1",
					size: 'mini',
					theme: ['#fff', 't'],
					plain: false,
					pro: ['c', 'bgc']
				}, {
					type: "inherit",
					label: "按钮2",
					theme: ['#fff', 's1'],
					size: 'normal',
					plain: false,
					pro: ['c', 'bgc']
				}, {
					type: "inherit",
					label: "按钮2",
					theme: ['#fff', 's2'],
					plain: false,
					pro: ['c', 'bgc']
				}, {
					type: "inherit",
					label: "按钮1",
					theme: ['t', 't'],
					size: 'normal',
					radius: 0,
					plain: true,
					pro: ['c', 'bdc']
				}, {
					type: "inherit",
					label: "按钮2",
					theme: ['t', 's1'],
					size: 'normal',
					radius: 8,
					plain: true,
					pro: ['c', 'bdc']
				}, {
					type: "inherit",
					label: "按钮2",
					theme: ['t', 's2'],
					size: 'normal',
					radius: 16,
					plain: true,
					pro: ['c', 'bdc']
				}]
			}
		}
	}
</script>

<style>
</style>
